Angular কম্পোনেন্টস

কম্পোনেন্ট হলো Angular অ্যাপ্লিকেশনের মূল বিল্ডিং ব্লক। প্রতিটি Angular কম্পোনেন্ট একটি UI উপাদান (UI element) বা ভিউ হিসেবে কাজ করে, যা HTML, CSS, এবং TypeScript কোডের সংমিশ্রণ থাকে। একটি কম্পোনেন্টের প্রধান কাজ হলো ইউজারের ইন্টারফেস তৈরি করা এবং কম্পোনেন্টের মধ্যে থাকা ডেটা বা লজিক পরিচালনা করা।

Angular অ্যাপ্লিকেশন গুলিতে একাধিক কম্পোনেন্ট থাকে, এবং এই কম্পোনেন্টগুলো একে অপরের সাথে সম্পর্কিত থাকে। কম্পোনেন্ট দ্বারা ডেটা শেয়ার করা, ইভেন্ট হ্যান্ডলিং করা এবং UI আপডেট করা যায়।

কম্পোনেন্টের গঠন

প্রত্যেকটি Angular কম্পোনেন্ট তিনটি প্রধান অংশ নিয়ে গঠিত:

1. HTML টেমপ্লেট – এটি UI-র কাঠামো এবং ডিজাইন নির্ধারণ করে।
2. CSS / SCSS – এটি টেমপ্লেটের স্টাইল নিয়ন্ত্রণ করে।
3. TypeScript ক্লাস – এটি কম্পোনেন্টের লজিক এবং ডেটা সংরক্ষণ করে এবং টেমপ্লেটের সাথে যোগাযোগ স্থাপন করে।

কম্পোনেন্টের উদাহরণ

import { Component } from '@angular/core';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})
export class HeroComponent {
  heroName: string = 'Superman';
  heroPower: string = 'Flying';

  constructor() { }

  changeHero() {
    this.heroName = 'Batman';
    this.heroPower = 'Rich';
  }
}

এখানে:

• @Component ডেকোরেটরটি কম্পোনেন্টটি Angular এর কম্পোনেন্ট হিসেবে চিহ্নিত করে।
• selector: 'app-hero' হচ্ছে কম্পোনেন্টের নাম, যা HTML টেমপ্লেটে ব্যবহার করা যাবে।
• templateUrl: './hero.component.html' এবং styleUrls: ['./hero.component.css'] কম্পোনেন্টের টেমপ্লেট এবং স্টাইল ফাইলের রেফারেন্স দেয়।

HTML টেমপ্লেট (hero.component.html)

<div>
  <h1>{{ heroName }}</h1>
  <p>{{ heroPower }}</p>
  <button (click)="changeHero()">Change Hero</button>
</div>

এখানে:

• {{ heroName }} এবং {{ heroPower }} হলো data binding এর মাধ্যমে TypeScript ক্লাসের ডেটা টেমপ্লেটে দেখানোর পদ্ধতি।
• (click)="changeHero()" হলো event binding, যা ইউজারের ক্লিক ইভেন্টকে হ্যান্ডল করতে ব্যবহৃত হয়।

CSS (hero.component.css)

h1 {
  color: blue;
}

p {
  color: red;
}

এখানে, CSS ব্যবহার করে h1 এবং p এলিমেন্টের স্টাইল নির্ধারণ করা হয়েছে।

কম্পোনেন্টের কাজ

1. UI তৈরি: কম্পোনেন্টের টেমপ্লেটের মাধ্যমে UI তৈরি করা হয়। এটি HTML, Angular ডিরেক্টিভ, এবং ডেটা বাইন্ডিং ব্যবহার করে ইউজারের ইন্টারফেস তৈরি করে।
2. ডেটা এবং লজিক পরিচালনা: কম্পোনেন্টের ক্লাসে থাকা প্রপার্টি এবং মেথড দ্বারা ডেটা এবং লজিক নিয়ন্ত্রিত হয়।
3. ইভেন্ট হ্যান্ডলিং: কম্পোনেন্টে ইভেন্ট হ্যান্ডলিং যেমন ক্লিক, কীবোর্ড ইনপুট ইত্যাদি পরিচালনা করা হয়।

কম্পোনেন্টের ডেকোরেটর (@Component)

Angular কম্পোনেন্টের একটি ডেকোরেটর হলো @Component, যা একটি ক্লাসকে কম্পোনেন্ট হিসেবে চিহ্নিত করে এবং সেই কম্পোনেন্টের টেমপ্লেট, স্টাইল এবং অন্যান্য বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করে।

@Component এর প্রোপার্টি:

1. selector: HTML টেমপ্লেটে কম্পোনেন্টটি কোন নামে ব্যবহার হবে তা নির্ধারণ করে। এটি একটি ট্যাগ নামের মতো হয়।
2. templateUrl: কম্পোনেন্টের HTML টেমপ্লেট ফাইলের পাথ।
3. template: আপনি যদি inline HTML টেমপ্লেট ব্যবহার করতে চান, তবে এটি ব্যবহার করা হয়।
4. styleUrls: কম্পোনেন্টের স্টাইলশীট ফাইলগুলোর পাথ।
5. styles: inline CSS, যেখানে CSS কোড সরাসরি কম্পোনেন্টে লেখা হয়।

উদাহরণ:

@Component({
  selector: 'app-user',
  template: `<div><h2>{{ username }}</h2></div>`,
  styles: ['h2 { color: green; }']
})
export class UserComponent {
  username: string = 'John Doe';
}

এখানে:

• selector: 'app-user' - HTML টেমপ্লেটে <app-user></app-user> ব্যবহার করতে পারবেন।
• template: inline HTML কোড।
• styles: inline CSS কোড।

কম্পোনেন্টের নেভিগেশন

Angular অ্যাপ্লিকেশনে বিভিন্ন কম্পোনেন্টের মধ্যে নেভিগেশন পরিচালনা করার জন্য Router ব্যবহার করা হয়। রাউটিং এবং নেভিগেশন কম্পোনেন্টের মধ্যে যোগাযোগ স্থাপন করে, যার মাধ্যমে ইউজার একটি কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে সহজেই যেতে পারে।

উদাহরণ (ক্লিক করে নেভিগেট করা):

<a [routerLink]="['/hero']">Go to Hero</a>

এখানে:

• [routerLink] দিয়ে অ্যাঙ্গুলার রাউটিং সিস্টেমের মাধ্যমে নির্দিষ্ট URL এ নেভিগেট করা হয়।

কম্পোনেন্টের লাইফসাইকেল

Angular কম্পোনেন্টের বিভিন্ন স্টেজে লাইফসাইকেল হুকস ব্যবহৃত হয়। এগুলি হলো বিশেষ মেথড যা Angular কম্পোনেন্টের নির্দিষ্ট অবস্থায় (যেমন, কম্পোনেন্ট তৈরি, আপডেট, ধ্বংস) চলমান হয়।

সাধারণ লাইফসাইকেল হুকস:

• ngOnInit(): কম্পোনেন্টটি তৈরি হওয়ার পর প্রথমবার কল হয়।
• ngOnChanges(): ইনপুট প্রপার্টি পরিবর্তিত হলে কল হয়।
• ngOnDestroy(): কম্পোনেন্টটি ধ্বংস হওয়ার আগে কল হয়।

এগুলো দ্বারা কম্পোনেন্টের আচরণ নিয়ন্ত্রণ করা হয়।

সারাংশ

Angular কম্পোনেন্টগুলো হল UI তৈরি এবং ডেটা ও লজিক পরিচালনার একক ইউনিট। প্রতিটি কম্পোনেন্ট HTML, CSS এবং TypeScript কোডের সংমিশ্রণ হয় এবং এর মাধ্যমে ইউজারের ইন্টারফেস তৈরি করা হয়। কম্পোনেন্টের মধ্যে ডেটা বাইন্ডিং, ইভেন্ট হ্যান্ডলিং এবং Angular রাউটিং সিস্টেম ব্যবহৃত হয়।

Angular-এ কম্পোনেন্ট তৈরি করা একটি গুরুত্বপূর্ণ কাজ। Angular CLI (Command Line Interface) ব্যবহার করে খুব সহজেই নতুন কম্পোনেন্ট তৈরি করা যায়। CLI ডেভেলপারদের কমান্ড লাইন ইন্টারফেসের মাধ্যমে অটোমেটেড প্রক্রিয়ায় কোড জেনারেট করতে সাহায্য করে, যা উন্নয়ন প্রক্রিয়া দ্রুত এবং কার্যকরী করে তোলে।

কম্পোনেন্ট কী?

Angular-এ কম্পোনেন্ট হলো মূল কাঠামো বা ব্লক যা UI তৈরি করে এবং অ্যাপ্লিকেশনের ভিউ নির্ধারণ করে। প্রতিটি কম্পোনেন্টে থাকে:

1. HTML টেম্পলেট – যেটি UI উপস্থাপন করে।
2. CSS/SCSS স্টাইল – UI এর স্টাইলিংয়ের জন্য।
3. TypeScript ক্লাস – যা কম্পোনেন্টের লজিক ধারণ করে।
4. Metadata – @Component ডেকোরেটর যা Angular কে জানিয়ে দেয় যে এটি একটি কম্পোনেন্ট।

Angular CLI দিয়ে কম্পোনেন্ট তৈরি করার পদ্ধতি

Angular CLI দিয়ে কম্পোনেন্ট তৈরি করতে হলে নিচের স্টেপগুলো অনুসরণ করতে হবে:

1. Angular CLI ইনস্টলেশন

প্রথমে, যদি আপনি Angular CLI ইনস্টল না করে থাকেন, তাহলে নিচের কমান্ড দিয়ে এটি ইনস্টল করতে হবে:

npm install -g @angular/cli

2. Angular প্রজেক্ট তৈরি করা

এখন, যদি আপনার অ্যাপ্লিকেশন না থাকে, তাহলে একটি নতুন Angular প্রজেক্ট তৈরি করতে হবে:

ng new my-angular-app

এখানে my-angular-app আপনার অ্যাপ্লিকেশনের নাম।

3. কম্পোনেন্ট তৈরি করা

এখন, CLI ব্যবহার করে কম্পোনেন্ট তৈরি করা যাবে। নিম্নলিখিত কমান্ডটি ব্যবহার করুন:

ng generate component component-name

অথবা শর্টকাট কমান্ড:

ng g c component-name

এখানে, component-name হলো আপনার তৈরি করতে চান এমন কম্পোনেন্টের নাম। উদাহরণস্বরূপ, যদি আপনি একটি user-profile নামক কম্পোনেন্ট তৈরি করতে চান, তাহলে কমান্ড হবে:

ng g c user-profile

এই কমান্ডটি কম্পোনেন্টটি তৈরি করবে এবং নিম্নলিখিত ফাইলগুলো স্বয়ংক্রিয়ভাবে তৈরি করবে:

• user-profile.component.ts (TypeScript ফাইল)
• user-profile.component.html (HTML টেম্পলেট)
• user-profile.component.css (CSS স্টাইল)
• user-profile.component.spec.ts (টেস্ট ফাইল)

এছাড়া, Angular CLI আপনার AppModule ফাইলে কম্পোনেন্টটিকে অটোমেটিকভাবে যোগ করে দেবে।

কম্পোনেন্ট ফাইলের স্ট্রাকচার

নতুন কম্পোনেন্ট তৈরি করার পর, আপনি একটি সাধারণ স্ট্রাকচার পাবেন:

1. user-profile.component.ts

এটি কম্পোনেন্টের TypeScript ফাইল, যেখানে কম্পোনেন্টের লজিক এবং মেটাডেটা থাকবে।

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

2. user-profile.component.html

এটি কম্পোনেন্টের HTML টেম্পলেট, যা UI উপস্থাপন করে।

<div class="user-profile">
  <h1>User Profile</h1>
  <p>Welcome to the user profile page!</p>
</div>

3. user-profile.component.css

এটি কম্পোনেন্টের স্টাইল ফাইল, যা টেম্পলেটের স্টাইল নির্ধারণ করে।

.user-profile {
  text-align: center;
  font-size: 20px;
}

কম্পোনেন্ট ব্যবহার করা

নতুন তৈরি করা কম্পোনেন্টটি ব্যবহার করার জন্য, আপনাকে AppComponent বা অন্য কোনো কম্পোনেন্টের HTML টেম্পলেটে <app-user-profile></app-user-profile> এই ট্যাগটি ব্যবহার করতে হবে।

উদাহরণ:

<!-- app.component.html -->
<div style="text-align:center">
  <h1>Welcome to Angular!</h1>
  <app-user-profile></app-user-profile>
</div>

এখানে, <app-user-profile></app-user-profile> হলো আপনার তৈরি করা UserProfileComponent এর সিলেক্টর, যা UI তে সেই কম্পোনেন্ট প্রদর্শন করবে।

CLI দিয়ে কম্পোনেন্ট তৈরি করার আরো কিছু অপশন

CLI কম্পোনেন্ট তৈরি করার সময় কিছু অতিরিক্ত ফ্ল্যাগ ব্যবহার করা যেতে পারে:

1. --inline-template

যদি আপনি HTML টেম্পলেটটি কম্পোনেন্টের TypeScript ফাইলে রাখতে চান, তাহলে এটি ব্যবহার করা যায়:

ng g c user-profile --inline-template

2. --inline-style

যদি আপনি CSS কোডটি কম্পোনেন্টের TypeScript ফাইলে রাখতে চান, তাহলে এটি ব্যবহার করা যায়:

ng g c user-profile --inline-style

3. --module

এই ফ্ল্যাগটি দিয়ে আপনি কম্পোনেন্টটি কোন মডিউলে যোগ করবেন তা নির্দিষ্ট করতে পারবেন:

ng g c user-profile --module=app

এটি user-profile কম্পোনেন্টটিকে app.module.ts মডিউলে যোগ করবে।

সারাংশ

Angular CLI ব্যবহার করে কম্পোনেন্ট তৈরি করা একটি সহজ এবং কার্যকর পদ্ধতি, যা ডেভেলপমেন্ট প্রক্রিয়া দ্রুত এবং সঠিকভাবে সম্পন্ন করতে সাহায্য করে। এই পদ্ধতিতে নতুন কম্পোনেন্ট তৈরি করা, কোড অটোমেটেডভাবে জেনারেট করা, এবং মডিউল ও কম্পোনেন্টের মধ্যে ডিপেন্ডেন্সি ম্যানেজ করা অনেক সহজ হয়।

Angular-এ কম্পোনেন্ট হলো অ্যাপ্লিকেশনের মৌলিক বিল্ডিং ব্লক। প্রতিটি কম্পোনেন্টের জন্য একটি ডেকোরেটর ব্যবহার করা হয়, যা Angular-কে জানিয়ে দেয় যে এটি একটি কম্পোনেন্ট এবং এটি কীভাবে কাজ করবে। এই ডেকোরেটরের মাধ্যমে কম্পোনেন্টের মেটাডেটা (যেমন টেম্পলেট, স্টাইল, ক্লাস ইত্যাদি) সংজ্ঞায়িত করা হয়।

Angular-এ কম্পোনেন্ট তৈরি করতে @Component ডেকোরেটর ব্যবহার করা হয়। এটি Angular-কে নির্দেশ করে যে এই ক্লাসটি একটি কম্পোনেন্ট, এবং এটি কীভাবে HTML টেম্পলেট, CSS স্টাইল, এবং অন্যান্য কনফিগারেশন ব্যবহার করবে।

কম্পোনেন্ট ডেকোরেটর এর গঠন

@Component ডেকোরেটরের মধ্যে কয়েকটি গুরুত্বপূর্ণ কনফিগারেশন থাকতে পারে:

• selector: এটি কম্পোনেন্টের নাম যা HTML টেম্পলেটে ব্যবহার করা হয়।
• templateUrl: কম্পোনেন্টের HTML টেম্পলেট ফাইলের পাথ।
• template: কম্পোনেন্টের HTML টেম্পলেট, যা সরাসরি ডেকোরেটরের মধ্যে লেখা যেতে পারে।
• styleUrls: কম্পোনেন্টের জন্য এক বা একাধিক CSS ফাইলের পাথ।
• styles: CSS স্টাইল, যা সরাসরি ডেকোরেটরের মধ্যে লেখা যেতে পারে।

কম্পোনেন্ট ডেকোরেটরের উদাহরণ

এখানে একটি সাধারণ Angular কম্পোনেন্টের উদাহরণ দেওয়া হলো যেখানে @Component ডেকোরেটর ব্যবহার করা হয়েছে:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Application';
}

এখানে:

• selector: 'app-root' - এই কম্পোনেন্টটি HTML ফাইলের মধ্যে <app-root></app-root> ট্যাগ হিসেবে ব্যবহার করা হবে।
• templateUrl: './app.component.html' - কম্পোনেন্টের HTML টেম্পলেটটি এই ফাইলে সংজ্ঞায়িত আছে।
• styleUrls: './app.component.css' - কম্পোনেন্টের CSS স্টাইল এই ফাইলে থাকবে।

অন্যান্য ডেকোরেটর প্রপার্টি

1. template

যদি আপনি HTML টেম্পলেটটি সরাসরি কম্পোনেন্টে লিখতে চান, তাহলে templateUrl এর পরিবর্তে template ব্যবহার করা হয়।

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ title }}</h1>
    <p>Welcome to the Angular world!</p>
  `,
  styles: [`
    h1 { color: blue; }
  `]
})
export class AppComponent {
  title = 'Angular Application';
}

এখানে template ডিরেক্টলি HTML কোড ধারণ করে এবং styles ব্যবহার করে স্টাইল অ্যাপ্লাই করা হয়েছে।

2. styles

এই প্রপার্টি দিয়ে আপনি সরাসরি CSS স্টাইল লিখতে পারেন। এটি inline CSS হিসেবে কাজ করে।

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    h1 { color: red; }
    p { font-size: 18px; }
  `]
})
export class AppComponent {
  title = 'Angular Application';
}

এখানে styles এর মাধ্যমে কম্পোনেন্টের CSS স্টাইল সরাসরি নির্দিষ্ট করা হয়েছে।

3. animations

এই প্রপার্টি ব্যবহার করে কম্পোনেন্টে এনিমেশন সংজ্ঞায়িত করা যায়। Angular এ animations ব্যবহার করে ইউআই উপাদানগুলোর মধ্যে এনিমেশন যোগ করা যায়।

import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  animations: [
    trigger('fadeIn', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('1s', style({ opacity: 1 }))
      ])
    ])
  ]
})
export class AppComponent {
  title = 'Angular Application';
}

এখানে, animations প্রপার্টি দিয়ে একটি fadeIn এনিমেশন নির্ধারণ করা হয়েছে, যা কম্পোনেন্টের উপাদানটি ঢোকানোর সময় এক সেকেন্ডের মধ্যে ফেড ইন হবে।

কম্পোনেন্ট ডেকোরেটরের অন্য বৈশিষ্ট্যসমূহ

1. providers

এই প্রপার্টি দিয়ে আপনি কম্পোনেন্টের জন্য সার্ভিস বা ডিপেন্ডেন্সি ইনজেকশন নির্ধারণ করতে পারেন।

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  providers: [UserService]
})
export class UserComponent {
  constructor(private userService: UserService) { }
}

এখানে, providers প্রপার্টি ব্যবহার করে UserService সার্ভিসকে ইনজেক্ট করা হয়েছে, যা শুধুমাত্র এই কম্পোনেন্টের মধ্যে ব্যবহৃত হবে।

2. changeDetection

এটি Angular কম্পোনেন্টের change detection স্ট্রাটেজি নির্ধারণ করতে ব্যবহৃত হয়। ডিফল্টভাবে, Angular কম্পোনেন্টে ChangeDetectionStrategy.Default ব্যবহৃত হয়, যা স্বয়ংক্রিয়ভাবে কম্পোনেন্টের পরিবর্তন অনুসরণ করে। তবে আপনি ChangeDetectionStrategy.OnPush ব্যবহার করে পরিবর্তন নির্দিষ্ট করতে পারেন, যাতে পরিবর্তন শুধুমাত্র ইনপুট প্রোপার্টি পরিবর্তিত হলে ঘটবে।

import { ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  title = 'Angular Application';
}

উপসংহার

কম্পোনেন্ট ডেকোরেটর Angular অ্যাপ্লিকেশনে কম্পোনেন্টের কার্যাবলী, স্টাইল, টেম্পলেট, এবং অন্যান্য গুরুত্বপূর্ণ কনফিগারেশন সংজ্ঞায়িত করার জন্য অত্যন্ত গুরুত্বপূর্ণ। এটি Angular এর মৌলিক স্ট্রাকচার এবং আর্কিটেকচার গঠনে সহায়ক ভূমিকা পালন করে এবং কোডকে আরো পরিষ্কার, মডুলার, এবং পুনঃব্যবহারযোগ্য করে তোলে।

Angular কম্পোনেন্টের একটি জীবনচক্র (life cycle) রয়েছে, যা বিভিন্ন ধাপে ভাগ করা হয়। প্রতিটি ধাপের মধ্যে Angular কম্পোনেন্টের অবস্থা পরিবর্তিত হয় এবং এই পরিবর্তনের সময় কম্পোনেন্টে নির্দিষ্ট কোড এক্সিকিউট করতে লাইফসাইকেল হুকস ব্যবহার করা যায়। লাইফসাইকেল হুকস হল Angular এর এমন মেথড যেগুলি কম্পোনেন্টের বিভিন্ন লাইফসাইকেল স্টেজে অ্যাক্সেস করা যায়।

এই হুকসগুলোর মাধ্যমে আপনি কম্পোনেন্ট তৈরি হওয়া, ইনি আপডেট হওয়া এবং ধ্বংস হওয়ার সময় বিভিন্ন কার্যকলাপ বা লজিক প্রয়োগ করতে পারেন।

কম্পোনেন্ট লাইফসাইকেল স্টেজ

Angular কম্পোনেন্টের জীবনচক্র প্রধানত ৭টি ধাপে ভাগ করা হয়:

1. নির্মাণ (Creation)
2. ইনিশিয়ালাইজেশন (Initialization)
3. ডেটা চেঞ্জ (Change Detection)
4. প্রদর্শন (Rendering)
5. আপডেট (Update)
6. ধ্বংস (Destruction)

প্রত্যেকটি ধাপে বিভিন্ন লাইফসাইকেল হুকস কার্যকর হয়।

Angular কম্পোনেন্ট লাইফসাইকেল হুকস

Angular কম্পোনেন্টে বেশ কিছু লাইফসাইকেল হুকস রয়েছে, যেগুলি আপনি প্রয়োগ করতে পারেন।

1. ngOnChanges

• এটি তখনই কল হয় যখন কম্পোনেন্টের ইনপুট প্রপার্টি পরিবর্তিত হয়। এর মাধ্যমে আপনি ইনপুট পরিবর্তনের উপর ভিত্তি করে কোনো কাস্টম লজিক প্রয়োগ করতে পারেন।

  import { Component, OnChanges, SimpleChanges } from '@angular/core';
  
  @Component({
    selector: 'app-example',
    template: `<p>{{ message }}</p>`
  })
  export class ExampleComponent implements OnChanges {
    @Input() message: string;
  
    ngOnChanges(changes: SimpleChanges) {
      console.log(changes);
    }
  }
  

  ngOnChanges মেথডে SimpleChanges অবজেক্ট আসে, যেখানে ইনপুট প্রপার্টির পূর্ববর্তী ও বর্তমান মান দেখতে পারেন।

2. ngOnInit

• এটি তখন কল হয় যখন কম্পোনেন্টের ইনপুট প্রপার্টি সম্পূর্ণরূপে ইনিশিয়ালাইজ হয়। সাধারণত এখানে কোনো ইনিশিয়াল ভ্যালু বা ডেটা লোড করার কাজ করা হয়।

  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-example',
    template: `<p>{{ message }}</p>`
  })
  export class ExampleComponent implements OnInit {
    message: string;
  
    ngOnInit() {
      this.message = 'Hello, Angular!';
    }
  }
  

  ngOnInit মেথড কম্পোনেন্টের প্রথম রেন্ডার হওয়ার পর কল হয়।

3. ngDoCheck

• এটি Angular এর পরিবর্তন সনাক্তকরণ (change detection) প্রক্রিয়ার অংশ হিসেবে কাজ করে। যখন Angular কোনো পরিবর্তন সনাক্ত করে না, তাও যদি আপনি কিছু পরিবর্তন বা চেক করতে চান, তখন এটি ব্যবহার করা হয়।

  import { Component, DoCheck } from '@angular/core';
  
  @Component({
    selector: 'app-example',
    template: `<p>{{ message }}</p>`
  })
  export class ExampleComponent implements DoCheck {
    message: string = 'Initial message';
  
    ngDoCheck() {
      console.log('DoCheck called');
    }
  }
  

  ngDoCheck মেথড কাস্টম চেক করার জন্য ব্যবহৃত হয়, যখন আপনি Angular-এর ডিফল্ট পরিবর্তন সনাক্তকরণের বাইরে কিছু করতে চান।

4. ngAfterContentInit

• এটি তখন কল হয় যখন কম্পোনেন্টের কনটেন্ট (টেম্পলেটে ডিফাইন করা প্রোপার্টি) প্রথমবার রেন্ডার করা হয়। আপনি এখানে কনটেন্টের প্রাথমিক লোডিং বা পার্সিং করতে পারেন।

  import { Component, AfterContentInit } from '@angular/core';
  
  @Component({
    selector: 'app-example',
    template: `<ng-content></ng-content>`
  })
  export class ExampleComponent implements AfterContentInit {
    
    ngAfterContentInit() {
      console.log('ngAfterContentInit called');
    }
  }
  

  ngAfterContentInit মেথড তখনই কল হয়, যখন Angular আপনার কম্পোনেন্টের ng-content প্রপার্টি রেন্ডার করে।

5. ngAfterContentChecked

• এটি তখন কল হয় যখন কম্পোনেন্টের কনটেন্ট চেক করা হয়। এটি ngAfterContentInit এর পরপরই কল হয়, এবং এরপরও যতবার চেকিং হয় ততবার কল হতে পারে।

  import { Component, AfterContentChecked } from '@angular/core';
  
  @Component({
    selector: 'app-example',
    template: `<ng-content></ng-content>`
  })
  export class ExampleComponent implements AfterContentChecked {
  
    ngAfterContentChecked() {
      console.log('ngAfterContentChecked called');
    }
  }
  

6. ngAfterViewInit

• এটি তখন কল হয় যখন কম্পোনেন্টের ভিউ (টেম্পলেট) এবং সাব কম্পোনেন্টগুলি প্রথমবার রেন্ডার হয়। আপনি এখানে UI সম্পর্কিত কোড বা ডোম ম্যানিপুলেশন করতে পারেন।

  import { Component, AfterViewInit } from '@angular/core';
  
  @Component({
    selector: 'app-example',
    template: `<div>{{ message }}</div>`
  })
  export class ExampleComponent implements AfterViewInit {
    
    ngAfterViewInit() {
      console.log('ngAfterViewInit called');
    }
  }
  

7. ngAfterViewChecked

• এটি তখন কল হয়, যখন কম্পোনেন্টের ভিউ চেক করা হয়। এটি ngAfterViewInit এর পরপরই চলে এবং এরপরও যতবার চেকিং হয় ততবার কল হতে পারে।

  import { Component, AfterViewChecked } from '@angular/core';
  
  @Component({
    selector: 'app-example',
    template: `<div>{{ message }}</div>`
  })
  export class ExampleComponent implements AfterViewChecked {
  
    ngAfterViewChecked() {
      console.log('ngAfterViewChecked called');
    }
  }
  

8. ngOnDestroy

• এটি তখন কল হয় যখন কম্পোনেন্ট বা ডিরেক্টিভ ধ্বংস (destroy) হয়। এটি বিশেষত পরিষ্কারকরণ (cleanup) কাজের জন্য ব্যবহৃত হয়, যেমন সাবস্ক্রিপশন বন্ধ করা, টাইমার বন্ধ করা ইত্যাদি।

  import { Component, OnDestroy } from '@angular/core';
  
  @Component({
    selector: 'app-example',
    template: `<div>{{ message }}</div>`
  })
  export class ExampleComponent implements OnDestroy {
  
    ngOnDestroy() {
      console.log('ngOnDestroy called');
    }
  }
  

  ngOnDestroy মেথডের মাধ্যমে আপনি কম্পোনেন্টের মেমরি লিক এড়াতে পারেন।

সারাংশ

Angular কম্পোনেন্টের লাইফসাইকেল হুকস বিভিন্ন ধাপে কার্যকর হয় এবং কম্পোনেন্টের জীবনচক্রের মধ্যে কোড কার্যকর করতে সাহায্য করে। আপনি এই হুকসগুলো ব্যবহার করে:

• ইনপুট ডেটার পরিবর্তন ট্র্যাক করতে পারেন।
• কম্পোনেন্ট লোড হওয়া এবং ধ্বংস হওয়ার সময় কিছু কার্যকলাপ করতে পারেন।
• ডোম বা কনটেন্ট রেন্ডার হওয়ার পরে UI-এ পরিবর্তন আনতে পারেন।

এই হুকসগুলো Angular অ্যাপ্লিকেশনকে আরও শক্তিশালী, কর্মক্ষম এবং মডুলার করে তোলে।

ডাটা বাইন্ডিং Angular অ্যাপ্লিকেশনের একটি গুরুত্বপূর্ণ বৈশিষ্ট্য, যার মাধ্যমে আপনি কম্পোনেন্টের ডেটা ও UI (User Interface) এর মধ্যে সম্পর্ক তৈরি করতে পারেন। ডাটা বাইন্ডিং মূলত ডেটা এবং UI এর মধ্যে একে অপরকে আপডেট করার প্রক্রিয়া। Angular-এ বিভিন্ন ধরনের ডাটা বাইন্ডিং রয়েছে, যেমন ইন্টারপোলেশন (Interpolation), প্রোপার্টি বাইন্ডিং (Property Binding), ইভেন্ট বাইন্ডিং (Event Binding) এবং টু-ওয়ে বাইন্ডিং (Two-way Binding)।

1. ইন্টারপোলেশন (Interpolation)

ইন্টারপোলেশন হলো Angular এর একটি ডাটা বাইন্ডিং পদ্ধতি, যেখানে কম্পোনেন্টের প্রোপার্টির মানকে HTML টেম্পলেটের মধ্যে সন্নিবেশিত করা হয়। এটি সাধারণত {{ }} (কুর্লি ব্র্যাকেটস) সাইন ব্যবহার করে।

উদাহরণ:

<h1>{{ title }}</h1>

এখানে {{ title }} কম্পোনেন্টের title প্রপার্টি থেকে মান নিয়ে টেম্পলেটের মধ্যে প্রদর্শিত হবে।

ব্যবহার:

• সাধারণত UI তে ডাইনামিক ডেটা প্রদর্শন করতে ব্যবহৃত হয়।
• শুধুমাত্র এক দিকে (কম্পোনেন্ট থেকে UI) ডেটা প্রবাহিত হয়।

2. প্রোপার্টি বাইন্ডিং (Property Binding)

প্রোপার্টি বাইন্ডিং একটি Angular বৈশিষ্ট্য, যার মাধ্যমে আপনি কম্পোনেন্টের ডেটাকে HTML ট্যাগের প্রপার্টির সাথে বাইন্ড করতে পারেন। প্রোপার্টি বাইন্ডিং করতে [ ] (স্কয়ার ব্র্যাকেট) ব্যবহার করা হয়।

উদাহরণ:

<img [src]="imageUrl">

এখানে [src] হল প্রোপার্টি বাইন্ডিং, যা imageUrl কম্পোনেন্টের প্রপার্টি থেকে মান নিয়ে img ট্যাগের src অ্যাট্রিবিউট হিসেবে ব্যবহার করবে।

ব্যবহার:

• প্রপার্টি বাইন্ডিং ব্যবহার করে আপনি HTML এলিমেন্টের অ্যাট্রিবিউটগুলির মান পরিবর্তন করতে পারেন।
• এটি এক দিকে (কম্পোনেন্ট থেকে DOM) ডেটা প্রবাহিত করে।

3. ইভেন্ট বাইন্ডিং (Event Binding)

ইভেন্ট বাইন্ডিং Angular-এ একটি পদ্ধতি, যার মাধ্যমে আপনি HTML এলিমেন্টে একটি ইভেন্ট (যেমন: ক্লিক, কীবোর্ড ইভেন্ট, ইত্যাদি) হ্যান্ডল করার জন্য কম্পোনেন্টের মেথড কল করতে পারেন। এটি ( ) (প্যারেনথেসিস) ব্যবহার করে।

উদাহরণ:

<button (click)="onClick()">Click Me</button>

এখানে (click) হল ইভেন্ট বাইন্ডিং, যা ব্যবহারকারীর ক্লিক ইভেন্টকে onClick() মেথডের সাথে যুক্ত করবে।

ব্যবহার:

• এটি ইভেন্ট হ্যান্ডলিংয়ের জন্য ব্যবহৃত হয়, যেমন ক্লিক, মাউসওভার ইত্যাদি।
• এটি এক দিকে (UI থেকে কম্পোনেন্টে) ডেটা প্রবাহিত করে।

4. টু-ওয়ে বাইন্ডিং (Two-way Binding)

টু-ওয়ে বাইন্ডিং হলো একটি পদ্ধতি যার মাধ্যমে কম্পোনেন্টের ডেটা এবং UI একে অপরের সাথে সিঙ্ক্রোনাইজ থাকে। অর্থাৎ, যখন UI তে কোনো পরিবর্তন হয়, তখন তা কম্পোনেন্টে প্রতিফলিত হয় এবং vice versa। Angular-এ ngModel ডিরেক্টিভ ব্যবহার করে টু-ওয়ে বাইন্ডিং করা হয়।

উদাহরণ:

<input [(ngModel)]="name">
<p>{{ name }}</p>

এখানে [(ngModel)] হল টু-ওয়ে বাইন্ডিং, যেখানে name প্রপার্টি ইনপুট ফিল্ডের মান পরিবর্তন হলে আপডেট হবে এবং ইনপুট ফিল্ডে name প্রপার্টির মান পরিবর্তন হলে তা UI তে প্রদর্শিত হবে।

ব্যবহার:

• ইউজারের ইনপুট এবং কম্পোনেন্টের ডেটা একে অপরের সাথে সিঙ্ক্রোনাইজ করতে টু-ওয়ে বাইন্ডিং ব্যবহৃত হয়।
• এটি ngModel ব্যবহার করে করা হয়, যেটি সাধারণত ফর্ম ইনপুট, চেকবক্স, রেডিও বাটন ইত্যাদি ক্ষেত্রে ব্যবহৃত হয়।

বাইন্ডিং পদ্ধতির তুলনা

উপসংহার

Angular ডাটা বাইন্ডিং পদ্ধতিগুলি খুবই শক্তিশালী এবং এই পদ্ধতিগুলির মাধ্যমে আপনি UI এবং কম্পোনেন্টের ডেটার মধ্যে সম্পর্ক তৈরি করতে পারেন। এগুলি ব্যবহার করে আপনি একটি ডাইনামিক এবং ইন্টারঅ্যাকটিভ অ্যাপ্লিকেশন তৈরি করতে পারেন, যেখানে কম্পোনেন্টের ডেটা স্বয়ংক্রিয়ভাবে UI তে প্রতিফলিত হয় এবং ব্যবহারকারীর ইনপুটের মাধ্যমে ডেটা পরিবর্তিত হয়।

Angular-এ কম্পোনেন্টে টেম্পলেট এবং স্টাইলস মূলত ইউজার ইন্টারফেস (UI) তৈরি করতে ব্যবহৃত হয়। কম্পোনেন্টের টেম্পলেটের মাধ্যমে HTML রেন্ডারিং এবং স্টাইলসের মাধ্যমে সেই HTML এর ডিজাইন কাস্টমাইজ করা হয়। Angular আপনাকে টেম্পলেট এবং স্টাইলস এর মধ্যে ডাইনামিক কনটেন্ট এবং ডিজাইন ম্যানিপুলেট করতে সাহায্য করে।

কম্পোনেন্টের টেম্পলেট

টেম্পলেট হলো Angular কম্পোনেন্টের HTML অংশ যা কম্পোনেন্টের UI (User Interface) তৈরি করে। Angular টেম্পলেট ব্যবহারকারীকে উপস্থাপন করতে ডাইনামিক ডেটা বাইন্ডিং, ইভেন্ট হ্যান্ডলিং এবং অন্যান্য টেম্পলেট সিনট্যাক্স প্রদান করে।

টেম্পলেট ডেকোরেটর

কম্পোনেন্টের টেম্পলেট ফাইলটি @Component ডেকোরেটরের মধ্যে templateUrl বা template প্রপার্টি দ্বারা উল্লেখ করা হয়। এই প্রপার্টির মাধ্যমে আপনি টেম্পলেট ফাইল সংযুক্ত করতে পারেন অথবা ইনলাইন HTML কোড দিতে পারেন।

• templateUrl: বাইরের HTML ফাইল সংযুক্ত করতে ব্যবহৃত হয়।
• template: ইনলাইন HTML কোড দেওয়ার জন্য ব্যবহৃত হয়।

টেম্পলেট উদাহরণ:

AppComponent-এর একটি টেম্পলেট উদাহরণ:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',  // বাইরের HTML টেম্পলেট ফাইল
  styleUrls: ['./app.component.css']    // স্টাইলস ফাইল
})
export class AppComponent {
  title = 'My Angular App';
}

app.component.html:

<div>
  <h1>{{ title }}</h1>
  <p>Welcome to the Angular app!</p>
</div>

এখানে:

• {{ title }} হলো Interpolation (ডেটা বাইন্ডিং) ব্যবহার করে title প্রোপার্টি টেম্পলেটে দেখানো হচ্ছে।

ইভেন্ট বাইন্ডিং এবং ডেটা বাইন্ডিং:

Angular এর টেম্পলেট এ ডেটা বাইন্ডিং এবং ইভেন্ট বাইন্ডিং ব্যবহৃত হয়।

• Interpolation (ডেটা বাইন্ডিং):

  <h1>{{ title }}</h1>
  

  এখানে title কম্পোনেন্টের প্রোপার্টি।

• Event Binding:

  <button (click)="changeTitle()">Change Title</button>
  

  এখানে (click) ইভেন্টের মাধ্যমে changeTitle() মেথড কল করা হচ্ছে।

• Property Binding:

  <img [src]="imageUrl">
  

  এখানে [src] প্রপার্টি বাইন্ডিং ব্যবহার করা হয়েছে imageUrl-কে।

• Two-way Binding:

  <input [(ngModel)]="name">
  

  এখানে [(ngModel)] দুই দিকের ডেটা বাইন্ডিং বাস্তবায়ন করছে।

কম্পোনেন্টের স্টাইলস

Angular কম্পোনেন্টের স্টাইলস কাস্টমাইজ করা হয় styleUrls বা styles প্রপার্টি ব্যবহার করে। styleUrls বাইরের সিএসএস ফাইল ব্যবহার করতে সাহায্য করে, এবং styles ইনলাইন স্টাইল দেওয়ার জন্য ব্যবহৃত হয়।

স্টাইল ফাইল ব্যবহার:

AppComponent-এর একটি স্টাইল ফাইল উদাহরণ:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']  // বাইরের স্টাইল ফাইল
})
export class AppComponent {
  title = 'My Angular App';
}

app.component.css:

h1 {
  color: blue;
}

p {
  font-size: 16px;
}

এখানে h1 এবং p ট্যাগের জন্য স্টাইল দেয়া হয়েছে।

ইনলাইন স্টাইল ব্যবহার:

আপনি যদি ইনলাইন স্টাইল ব্যবহার করতে চান, তবে styles প্রপার্টি ব্যবহার করতে পারেন:

@Component({
  selector: 'app-root',
  template: `<h1>{{ title }}</h1>`,
  styles: [`h1 { color: red; }`]
})
export class AppComponent {
  title = 'Inline Styled Angular App';
}

এখানে h1 এর স্টাইল ইনলাইনভাবে প্রদান করা হয়েছে।

কম্পোনেন্ট স্তরের স্টাইল স্কোপিং

Angular একটি এনক্যাপসুলেশন মেকানিজম প্রদান করে যার মাধ্যমে কম্পোনেন্টের স্টাইলস শুধুমাত্র ওই কম্পোনেন্টের টেম্পলেটে প্রযোজ্য হয়। এর ফলে, অন্য কম্পোনেন্টের স্টাইলগুলোর সাথে কনফ্লিক্ট হয় না। Angular এর ডিফল্ট স্টাইল এনক্যাপসুলেশন মোড হল Emulated, যা কম্পোনেন্টের স্টাইলসকে শুধুমাত্র ঐ কম্পোনেন্টের মধ্যে সীমাবদ্ধ রাখে।

স্টাইল এনক্যাপসুলেশন:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.Emulated  // ডিফল্ট এনক্যাপসুলেশন
})
export class AppComponent {
  title = 'Styled Angular App';
}

এছাড়াও, আপনি ViewEncapsulation এর মান পরিবর্তন করতে পারেন:

• None: স্টাইলস গ্লোবালি প্রযোজ্য হবে, অন্য কম্পোনেন্টের স্টাইলও প্রভাবিত হবে।
• ShadowDom: স্টাইলস শ্যাডো DOM ব্যবহার করবে, যা কম্পোনেন্টের স্টাইলকে সম্পূর্ণভাবে আলাদা রাখবে।

সারাংশ

Angular-এ কম্পোনেন্টের টেম্পলেট এবং স্টাইলস ব্যবহার করে আপনি ইউজার ইন্টারফেস ডিজাইন করতে পারেন এবং ডাইনামিক ডেটা উপস্থাপন করতে পারেন। টেম্পলেট ডেটা বাইন্ডিং, ইভেন্ট হ্যান্ডলিং, এবং কন্ডিশনাল রেন্ডারিংয়ের মাধ্যমে UI তৈরি করে, এবং স্টাইলস দিয়ে টেম্পলেটের ডিজাইন কাস্টমাইজ করা হয়। Angular এর স্টাইল এনক্যাপসুলেশন নিশ্চিত করে যে কম্পোনেন্টের স্টাইল শুধুমাত্র ওই কম্পোনেন্টের মধ্যে প্রযোজ্য হবে, যা অ্যাপ্লিকেশনের অন্যান্য অংশের সাথে কোনো কনফ্লিক্ট সৃষ্টি করে না।